
import { useNavigate } from 'react-router-dom'

const navData: {
    title: string
    path?: string
}[] = [
        {
            title: "首页",
            path: "/"
        },
        {
            title: "智慧城市",
            path: "/smart-city"
        },
        {
            title: "智慧照明",
            path: "/smart-light"
        },
        {
            title: "解决方案"
        },
        {
            title: "工程案例",
            path: "/municipal-works"
        },
        {
            title: "新闻动态"
        },
        {
            title: "关于我们"
        },
        {
            title: "招贤纳士"
        },
    ]

export type NavbarProps = {
    theme?: "light" | "dark"
    backGround?: string
}
export default function Navbar(props: NavbarProps) {
    const navigate = useNavigate();
    function navTo(path: string) {
        if (path) {
            navigate(path)
        }
    }
    const navItems = navData.map(nav =>
        <li className='cursor-pointer' key={nav.title} onClick={() => navTo(nav.path!)}>{nav.title}</li>
    )
    const { theme = "dark", backGround = "transparent" } = props
    let imgSrc: string
    let textColor: string
    if (theme === "dark") {
        imgSrc = "/src/assets/home/logo-black.png"
        textColor = "text-black"
    } else {
        imgSrc = "/src/assets/home/logo-white.png"
        textColor = "text-white"
    }
    return (
        <nav className={`navbar absolute w-full z-100`} style={{ background: backGround }}>
            <div className={`container mx-auto flex items-center h-[80px]`}>
                <img src={imgSrc} className='h-[20px] mr-[100px]' alt="" />
                <ul className={`nav hidden lg:flex flex-1 justify-between ${textColor}`}>
                    {navItems}
                </ul>
            </div>
        </nav>
    )
}
